Wijmo UI for the Web
Creating Hierarchical Grid
Wijmo User Guide > Widgets > Grid > Grid Concepts > Hierarchical Data Binding > Creating Hierarchical Grid

This topic demonstrates how to create a Hierarchical data view in wijgrid. In this example, the wijgrid control is bound to the Customers table and Orders table of Nwind.mdb database. Fields from these tables are used to display a hierarchical data binding in wijgrid.

The example script below sets various options to represent hierarchical data binding in grid.

After completing these steps, a hierarchical grid with detail table nested within the master table is created, which looks like the following live widget.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
   require(["wijmo.wijgrid"], function () {
     $(document).ready(function () {
        $("#grid").wijgrid({
        //Bind Wijgrid to a data source
          data: nwind.customers,
            columnsAutogenerationMode: "none",
              columns: [
              //set dataKey value
               { dataKey: "CompanyName", headerText: "Company name" },
               { dataKey: "ContactName", headerText: "Contact name" }
                       ],
              detail: {
                data: nwind.orders,
                  columnsAutogenerationMode: "none",
                  columns: [
      { dataKey: "OrderDate", headerText: "Order date", dataType: "datetime" },
      { dataKey: "Freight", headerText: "Freight", dataType: "number" }
                            ],
                //Link master-detail tables using relation
       relation: [
               { masterDataKey: "CustomerID", detailDataKey: "CustomerID" }
                 ],
                 detail: {
                      data: nwind.orderDetails,
                      columnsAutogenerationMode: "none",
                      columns: [
           { dataKey: "ProductName", headerText: "Product name" },
           { dataKey: "UnitPrice", headerText: "Unit price", dataType: "currency" },
           { dataKey: "Quantity", headerText: "Quantity", dataType: "number" }
                 ],
          relation: [
  { masterDataKey: "OrderID", detailDataKey: "OrderID" }
                            ]
                        }
                    }
                });
            });
        });
     //fetch data from nwind database
        var nwind = {
        //table customers
            customers: [
                { CustomerID: "ALFKI", CompanyName: "Alfreds Futterkiste", ContactName: "Maria Anders" },
                { CustomerID: "ANATR", CompanyName: "Ana Trujillo Emparedados y helados", ContactName: "Ana Trujillo" },
                { CustomerID: "ANTON", CompanyName: "Antonio Moreno Taqueria", ContactName: "Antonio Moreno" }
            ],
            //table orders
            orders: [
                { OrderID: 10643, CustomerID: "ALFKI", OrderDate: new Date(2015, 8, 26), Freight: 29.46 },
                { OrderID: 10692, CustomerID: "ALFKI", OrderDate: new Date(2015, 10, 3), Freight: 61.02 },
                { OrderID: 10702, CustomerID: "ALFKI", OrderDate: new Date(2015, 10, 13), Freight: 23.94 },
                { OrderID: 10308, CustomerID: "ANATR", OrderDate: new Date(2014, 9, 19), Freight: 1.61 },
                { OrderID: 10625, CustomerID: "ANATR", OrderDate: new Date(2015, 8, 8), Freight: 43.9 },
                { OrderID: 10365, CustomerID: "ANTON", OrderDate: new Date(2014, 11, 28), Freight: 22 },
                { OrderID: 10507, CustomerID: "ANTON", OrderDate: new Date(2015, 4, 16), Freight: 47.45 }
            ],
            orderDetails: [
                { OrderID: 10643, ProductName: "Chartreuse verte", UnitPrice: 18, Quantity: 21 },
                { OrderID: 10643, ProductName: "Spegesild", UnitPrice: 12, Quantity: 2 },
                { OrderID: 10692, ProductName: "Vegie-spread", UnitPrice: 43.9, Quantity: 20 },
                { OrderID: 10702, ProductName: "Aniseed Syrup", UnitPrice: 10, Quantity: 6 },
                { OrderID: 10308, ProductName: "Gudbrandsdalsost", UnitPrice: 36, Quantity: 1 },
                { OrderID: 10308, ProductName: "Outback Lager", UnitPrice: 15, Quantity: 5 },
                { OrderID: 10625, ProductName: "Tofu", UnitPrice: 23.25, Quantity: 3 },
                { OrderID: 10625, ProductName: "Camembert Pierrot", UnitPrice: 34, Quantity: 10 },
                { OrderID: 10365, ProductName: "Queso Cabrales", UnitPrice: 21, Quantity: 24 },
                { OrderID: 10507, ProductName: "Ipoh Coffee", UnitPrice: 46, Quantity: 15 },
                { OrderID: 10507, ProductName: "Chocolade", UnitPrice: 12.75, Quantity: 15 }
            ]
        };
    </script>